@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;

    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-muted;
}

::-webkit-scrollbar-thumb {
  @apply bg-muted-foreground/30 rounded-md;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-muted-foreground/50;
}

/* Monaco Editor 样式优化 */
.monaco-editor {
  @apply rounded-md border;
}

.monaco-editor .margin {
  @apply bg-muted/50;
}

.monaco-editor .monaco-editor-background {
  @apply bg-background;
}

/* 数据表格样式 */
.data-table {
  @apply w-full border-collapse;
}

.data-table th {
  @apply bg-muted/50 px-4 py-2 text-left font-medium;
}

.data-table td {
  @apply px-4 py-2 border-t;
}

.data-table tr:hover {
  @apply bg-muted/30;
}

/* 加载动画 */
.loading-spinner {
  @apply animate-spin rounded-full border-2 border-muted border-t-primary;
}

/* 状态指示器 */
.status-indicator {
  @apply inline-flex items-center gap-2;
}

.status-indicator.healthy {
  @apply text-green-600;
}

.status-indicator.warning {
  @apply text-yellow-600;
}

.status-indicator.error {
  @apply text-red-600;
}

.status-indicator.unknown {
  @apply text-gray-600;
}

/* 代码块样式 */
.code-block {
  @apply bg-muted p-4 rounded-md font-mono text-sm overflow-x-auto;
}

/* 响应式布局 */
.responsive-grid {
  @apply grid gap-4;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* 卡片阴影效果 */
.card-shadow {
  @apply shadow-sm hover:shadow-md transition-shadow duration-200;
}

/* 按钮状态 */
.btn-loading {
  @apply opacity-50 cursor-not-allowed;
}

/* 表单验证样式 */
.form-error {
  @apply text-destructive text-sm mt-1;
}

.form-field-error {
  @apply border-destructive focus:ring-destructive;
}

/* 工具提示样式 */
.tooltip {
  @apply bg-popover text-popover-foreground px-2 py-1 rounded text-xs shadow-md;
}

/* 侧边栏样式 */
.sidebar {
  @apply bg-card border-r transition-all duration-300;
}

.sidebar.collapsed {
  @apply w-16;
}

.sidebar.expanded {
  @apply w-64;
}

/* 导航样式 */
.nav-item {
  @apply flex items-center gap-3 px-3 py-2 rounded-md transition-colors;
}

.nav-item:hover {
  @apply bg-accent text-accent-foreground;
}

.nav-item.active {
  @apply bg-primary text-primary-foreground;
}

/* 面包屑导航 */
.breadcrumb {
  @apply flex items-center gap-2 text-sm text-muted-foreground;
}

.breadcrumb-separator {
  @apply text-muted-foreground/50;
}

/* 标签页样式 */
.tab-trigger {
  @apply px-4 py-2 border-b-2 border-transparent transition-colors;
}

.tab-trigger[data-state="active"] {
  @apply border-primary text-primary;
}

/* 进度条样式 */
.progress-bar {
  @apply bg-muted rounded-full overflow-hidden;
}

.progress-fill {
  @apply bg-primary h-full transition-all duration-300;
}

/* 通知样式 */
.notification {
  @apply fixed top-4 right-4 z-50 max-w-sm;
}

.notification.success {
  @apply bg-green-50 border-green-200 text-green-800;
}

.notification.error {
  @apply bg-red-50 border-red-200 text-red-800;
}

.notification.warning {
  @apply bg-yellow-50 border-yellow-200 text-yellow-800;
}

.notification.info {
  @apply bg-blue-50 border-blue-200 text-blue-800;
}
